import React, { useState, useEffect, useRef } from 'react'
import "./MainToolbarPanel.css";

import Button from 'react-bootstrap/Button';
import Image from 'react-bootstrap/Image';
import Dropdown from 'react-bootstrap/Dropdown';
import Tooltip from 'react-bootstrap/Tooltip';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import CloseButton from 'react-bootstrap/CloseButton';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
import Form from 'react-bootstrap/Form';
import { relativeTimeRounding } from 'moment';

//props.onRoiButtonClick
//props.onZoomInClick
//props.onZoomOutClick
//props.onPanClick
//props.onPinClick 
//props.onDrawRectClick
//props.onDrawPolygonClick
//props.onFullScreenClick
//props.onLayoutClick
//props.onCoordinateChanged
//props.onRoiClearClickCallback
//props.loginedUser
//props.viewProjection
function MainToolbarPanel(props) {

    const [userImg, setUserImg] = useState('');
    const [currentCmd, setCurrentCmd] = useState('pan');//default use pan, only for pan or pin
    const [userTooltipOpacity, setUserTooltipOpacity] = useState(0);

    const onPanClick = function () {
        setCurrentCmd('pan');
        props.onPanClick();
    }

    const onPinClick = function () {
        setCurrentCmd('pin');
        props.onPinClick();
    }

    const coordinatesOption = [
        {
            key: 'EPSG:4326',
            text: 'EPSG:4326',
            value: 'EPSG:4326'
        }
    ]
    const ref = useRef(null);

    useEffect(() => {
        let imgurl = global.g_staticResourceRoot + props.loginedUser.img;
        setUserImg(imgurl);

    }, [props.loginedUser])

 

    return (
        <div 
        
        className="MainToolbarPanel">
            <div style={{ height: '32px', lineHeight: '32px', float: 'left' }}>当前感兴趣区:</div>
            <ButtonGroup style={{ float: 'left' }} >
            <Button
            variant="light" 
            style={{width:'180px', height:'30px',marginTop:'1px',padding:'2px' }}
            size='mini' icon labelPosition='right'
            onClick={props.onRoiButtonClick}>
                {props.currentRoiObject ? props.currentRoiObject.name : "无"}
            </Button>
            <Button variant="light"
            style={{ height:'30px',marginTop:'1px',padding:'2px',paddingLeft:'8px',paddingRight:'8px' }}
            onClick={props.onRoiClearClickCallback} >×</Button>
            </ButtonGroup>
            
            <img src="/images/mtoolbar-zoomin.png" className='MTBImageButton' onClick={props.onZoomInClick} />
            <img src="/images/mtoolbar-zoomout.png" className='MTBImageButton' onClick={props.onZoomOutClick} />
            <img src={(currentCmd !== 'pan') ? "/images/mtoolbar-hand.png" : "/images/pan-active.png"}
                className='MTBImageButton' onClick={onPanClick} />
            <img src={(currentCmd !== 'pin') ? "/images/boxpin.png" : "/images/pin-active.png"}
                className='MTBImageButton' onClick={onPinClick} />
            <img src="/images/mtoolbar-rect.png" className='MTBImageButton' onClick={props.onDrawRectClick} />
            <img src="/images/mtoolbar-polygon.png" className='MTBImageButton' onClick={props.onDrawPolygonClick} />
            <img src="/images/mtoolbar-fullscreen.png" className='MTBImageButton' onClick={props.onFullScreenClick} />
            <img src="/images/mtoolbar-layout.png" className='MTBImageButton' onClick={props.onLayoutClick} />
            <Button style={{ float:'right',height:'30px',marginLeft:'2px',marginTop:'1px',padding:'2px',fontSize:'16px' }} 
            variant="outline-secondary" 
            size='mini'
            icon
            onClick={props.onUserQuit}>登出</Button>

            <div style={{float:'right',overflow:'visible'}}
            ref={ref}
            >
                <Image src={userImg}
                style={{marginLeft: '8px', width: '32px', height: '32px' }} 
                avatar
                onMouseOver={()=>setUserTooltipOpacity(1)}
                onMouseLeave={()=>setUserTooltipOpacity(0)}
                />
                <div className='tooltip bs-tooltip-end' 
                style={{position:'absolute',padding:'0px',opacity:userTooltipOpacity}}>
                    <div className='arrow-up'></div>
                    <div className="tooltip-inner">&nbsp;&nbsp;{props.loginedUser.uname}&nbsp;&nbsp;</div>
                </div>
            </div>           
            
            <Form.Select size="sm"
            style={{ float: 'right', width:'140px' }}
            onChange={props.onCoordinateChanged}
            value={props.viewProjection}
            >
            <option>EPSG:4326</option>
            <option>EPSG:3857</option>
            <option>EPSG:3413</option>
            <option>EPSG:3976</option>
            </Form.Select>
            <div style={{ clear: 'both' }}></div>
        </div>
    )
}

export default MainToolbarPanel
